<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        a{
            cursor: pointer;
        }
        .head-left {
            background-repeat: no-repeat;
            display: block;
            height: 24px;
            width: 125px;
            background-position: 50%;
        }
        .head {
            position: absolute;
            width: 100%;
            z-index: 999;
            top: 0;
        }
        .head-inleft {
            position: relative;
            z-index: 12;
            margin: 0 auto;
            max-width: 1240px;
            color: #FFFFFF;
        }

        .head-card {
            position: relative;
            float: right;
            margin: 27px 0 0 8px;
            width: 29px;
            height: 29px;
            background-image: url(${pageContext.request.contextPath}/static/img/cart.png);
            background-repeat: no-repeat;
            -webkit-background-size: 100%;
            background-size: 100%;
            text-align: center;
            font-size: 12px;
            text-indent: 3px;
            line-height: 10px;
            background-position-y: center;
        }

        #head-img-userBean>img {
            display: block;
            height: 44px;
            width: 29px;
            margin-top: -5px;
            padding-bottom: 15px;
        }
        .head-userBean {
            float: right;
            position: relative;
            padding: 32px 0 0 8px;
            z-index: 1000;

        }
        .head-userBean:hover div{
            display: block;
        }
        .userBean-box {
            position: absolute;
            display: none;
            background-color: #fff;
            width: 98px;
            height: auto;
            right: 0;
            top: 64px;
            left: 50%;
            margin-left: -48px;
            -webkit-box-shadow: 0 0 5px rgba(0,0,0,.1);
            -moz-box-shadow: 0 0 5px rgba(0,0,0,.1);
            box-shadow: 0 0 5px rgba(0,0,0,.1);
        }
        .userBean-box li {
            font-size: 12px;
            margin: 15px auto;
            color: #000;
        }
        .hand{
            cursor: pointer;
        }
        ul {
            list-style: none;
            margin-left: 25px;
        }
        .userBean-box li:hover{
            color: #0bbbef;
        }
        .head-query {
            float: right;
            position: relative;
            margin: 26px 5px 0 10px;
            width: 170px;
            height: 30px;
            line-height: 29px;
            font-size: 12px;
            border-radius: 20px;
            border: 1px solid #999;

        }
        .head-query>input {
            font-size: 12px;
            line-height: 20px;
            display: block;
            border: none;
            outline: 0;
            height: 20px;
            width: 127px;
            margin-left: 15px;
            margin-top: 5px;
            outline-offset: 0;
            color: #333333;
            background-color: rgba(255, 255, 255, 0);
        }
        .head-query>a {
            position: absolute;
            top: 0;
            right: 5px;
            bottom: 0;

        }
        .head-list {
            float: right;
            position: relative;
            overflow: hidden;
            white-space: nowrap;
        }

        .head-list>ul>li {
            display: list-item;
            float: left;
        }
        .head-list>ul>li>a {
            display: block;
            padding: 31px 20px 30px;
            font-size: 14px;
            text-decoration: none;
            line-height: 21px;
            transition: color .1s linear;
        }

        .head-list>ul>li>a:hover{
            color: #0bbbef;
        }
        .head-none {
            background-color: #ffffff;
            width: 100%;
            height: 0;
            position: absolute;
            left: 0;
            top: 68px;
            overflow: hidden;
        }
        .cn {
            position: relative;
            z-index: 11;
            transition: height .3s;
            height: 265px;
            top: -83px;
        }
        .head-none>div {
            position: absolute;
            width: 100%;
            display: block;
            height: 183px;
            top: 76px;
            text-align: center;

        }
        .head-none-list {
            position: absolute;
            display: none;
            left: 50%;
            transform: translateX(-50%);
            width: 1240px;

        }
        .head-none-list>ul {
            overflow: hidden;
            padding: 5px 0 20px;
            margin: 0;
            text-align: center;
            font-size: 12px;
            list-style: none;
        }
        .head-none-list>ul>li {
            display: inline-block;
            margin: 0;
            padding: 5px 5px 20px;
            width: 142px;
            height: 140px;
            color: #333333;
        }
        .header-phone-img {
            display: block;
            height: 120px;
            width: 120px;
            background-repeat: no-repeat;
            -webkit-background-size: 120px;
            background-size: 120px;
            margin: 0 auto;
        }
        .blo{
            display: block;
        }
        .head-black {
            color: #000000;
        }

        .head-none-list>ul>li {
            opacity: 0.7;
        }
        ul>li:hover {
            opacity: 1;
        }

    </style>
    <script>
        $(function () {
            $(".head-dis").hover(function () {
                $(".head-none").addClass("cn");
                let index = $(this).index();
                $(document.getElementsByClassName("head-none-list")).removeClass("blo");
                $(document.getElementsByClassName("head-none-list")[index]).addClass("blo");
                $(".head-inleft").addClass("head-black");
            });
            $(".head-none").mouseleave(function () {
                let flag = false;
                $(".head-dis").hover(function () {
                    flag = true;
                });
                if (flag) {
                    return;
                }
                $(".head-none").removeClass("cn");
                $(".head-inleft").removeClass("head-black");
            });
        });
    </script>
</head>
<body>
    <div class="head">
        <div class="head-inleft">
            <div style="float:left;padding: 28px 0;">
                <a class="head-left">
                    <svg style="display: block;width: 100%;height: 100%" fill="#00b4ff" version="1.1" id="Logo" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="402.048px" height="73.556px" viewBox="17.318 5.824 402.048 73.556" enable-background="new 17.318 5.824 402.048 73.556">
                        <path d="M321.513,5.824H256.91v12.878h51.478l-49.294,44.581c-8.227,7.023-2.872,16.096,3.958,16.096h65.337V66.472 h-52.117l48.964-44.554C333.52,14.473,328.535,5.824,321.513,5.824"></path>
                        <rect x="226.517" y="5.824" width="14.426" height="73.556"></rect>
                        <path d="M104.296,5.824h-71.36c-8.576,0-15.618,7.012-15.618,15.588v57.967H31.14V23.743 c0-2.711,2.208-5.041,4.92-5.041h25.31v60.677h14.428V18.702h25.312c2.712,0,4.919,2.329,4.919,5.041v55.636h13.86V21.416 C119.888,12.841,112.872,5.824,104.296,5.824"></path>
                        <path d="M148.765,23.614c0-2.712,2.199-4.912,4.911-4.912h55.909V5.824h-58.236c-8.576,0-15.592,7.016-15.592,15.592 v42.37c0,8.576,7.017,15.592,15.592,15.592h58.236V66.5h-55.909c-2.711,0-4.911-2.199-4.911-4.912V49.042h58.43V36.117h-58.43 V23.614z"></path>
                        <path d="M405.506,5.824v55.637c0,2.71-2.22,5.039-4.931,5.039h-39.77c-2.711,0-4.892-2.328-4.892-5.039V5.824h-13.86 v57.963c0,8.576,7.018,15.592,15.592,15.592h46.127c8.575,0,15.592-7.017,15.592-15.592V5.824H405.506z"></path>
                    </svg>
                </a>
            </div>
            <a class="head-card"></a>
            <div class="head-userBean">
                <div id="head-img-userBean" class="hand">
                    <img src="../../static/img/our-line.png">
                </div>
                <div class="userBean-box">
                    <ul>
                        <li><a href="/login">立即登录</a></li>
                        <li><a>立即注册</a></li>
                        <li><a>我的订单</a></li>
                        <li><a>M码通道</a></li>
                    </ul>
                </div>
            </div>
            <div class="head-query">
                <input name="select" placeholder="魅族16XS">
                <a><img src="../../static/img/search.png" height="14" width="17"></a>
            </div>
            <div class="head-list">
                <ul>
                    <li class="head-dis"><a>手机</a></li>
                    <li class="head-dis"><a>声学</a></li>
                    <li class="head-dis"><a>配件</a></li>
                    <li class="head-dis"><a>生活</a></li>
                    <li><a>Flyme</a></li>
                    <li><a>服务</a></li>
                    <li><a>专卖店</a></li>
                    <li><a>社区</a></li>
                    <li class="head-dis"><a>APP下载</a></li>
                </ul>
            </div>
        </div>
        <div class="head-none">
            <div>
                <div class="head-none-list">
                    <ul>
                        <c:forEach items="${sessionScope.HeadPro}" var="pro">
                            <li pid="${pro.pid}">
                                <a>
                                    <i class="header-phone-img" style="background-image:
                                            url(${pageContext.request.contextPath}${pro.path}"></i>
                                    <p>${pro.pname}</p>
                                    <p>${pro.price}</p>
                                </a>
                            </li>
                        </c:forEach>
                        <script>
                            $(function () {
                                $(".head-none-list>ul").on("click", "li", function () {
                                    let pid = $(this).attr("pid");
                                    location.href = "http://localhost:8080/maindetail.jsp?pid=" + pid;
                                });
                            });
                        </script>
                    </ul>
                </div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
</body>
</html>